<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <div class="filter-container">
      <el-form inline>
        <el-form-item label="姓名">
          <el-input v-model="search.name" class="filter-item" />
        </el-form-item>
        <el-form-item>
          <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" icon="el-icon-plus" @click="showDialog()">添加学生</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 数据表格 -->
     <div class="table-container">
      <el-table v-loading="listLoading" :data="pageInfo.data" border fit highlight-current-row header-cell-class-name="table-header">
        <el-table-column label="ID" prop="id" width="50" />
        <el-table-column label="姓名" prop="name" width="80" />
        <el-table-column label="照片">
          <template slot-scope="{ row }">
            <el-image v-if="row.img" :src="row.img" style="width: 80px; height: 80px;" />
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex" width="50" />
        <el-table-column label="年龄" prop="age" width="50" />
        <el-table-column label="等级" prop="grade" width="80" />
        <el-table-column label="联系人">
          <template slot-scope="{ row }">
            <div>{{ row.parent_relation }}:{{ row.parent_name }} / {{ row.parent_phone }}</div>
          </template>
        </el-table-column>
        <el-table-column label="微信" width="50">
          <template slot-scope="{ row }">
            <div><i v-if="row.parent_wx_id" class="el-icon-check" :size="23" /></div>
          </template>
        </el-table-column>
        <el-table-column label="地址" prop="address" />
        <el-table-column label="推荐人" prop="referrer_name" />
        <el-table-column label="老师" prop="teacher_name" />
        <el-table-column label="创建时间" prop="created_at" width="160" />
        <el-table-column label="操作" width="140">
          <template slot-scope="scope">
            <router-link :to="{ name: 'StudentCourse', query: { studentId: scope.row.id, studentName: scope.row.name } }">
              <el-button type="text" class="mr-3" size="mini">课程</el-button>
            </router-link>
            <el-button type="text" size="mini" @click="showDialog(scope.$index)">编辑</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination
        v-show="pageInfo.total > 0"
        :total="pageInfo.total"
        :page.sync="pageInfo.current_page"
        :limit.sync="pageInfo.per_page"
        @pagination="getList"
        />
    </div>
    <!-- 新增/编辑对话框 -->
     <div class="dialog-container">
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" width="900px">
        <el-form label-position="right" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="姓名">
                <el-input v-model="temp.name" class="w-200" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="temp.sex">
                  <el-radio label="男" value="男" />
                  <el-radio label="女" value="女" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker
                  v-model="temp.birthday"
                  type="date"
                  class="w-190"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item label="等级">
                <div class="flex items-center">
                  <el-input v-model="temp.grade" class="w-80 mr-2" />
                  <el-radio-group v-model="temp.grade">
                    <el-radio v-for="item in gradeOptions" :key="item" :label="item" :value="item" class="mr-0" />
                  </el-radio-group>
                </div>
              </el-form-item>
              <el-form-item label="推荐人">
                <el-input v-model="temp.referrer_name" readonly class="w-200" @click.native="selectStudentVisible = true" />
              </el-form-item>
              <el-form-item label="头像">
                <upload-image v-model="temp.img" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="监护关系" prop="parent_relation">
                <el-input v-model="temp.parent_relation" />
              </el-form-item>
              <el-form-item label="家长姓名" prop="parent_name">
                <el-input v-model="temp.parent_name" />
              </el-form-item>
              <el-form-item label="家长电话" prop="parent_phone">
                <el-input v-model="temp.parent_phone" />
              </el-form-item>
              <el-form-item label="责任老师" prop="teacher">
                <el-input v-model="temp.teacher_name" readonly @click.native="selectTeacherVisible = true" />
              </el-form-item>
              <el-form-item label="家庭地址" prop="address">
                <el-input v-model="temp.address" type="textarea" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <SelectStudent :visible.sync="selectStudentVisible" @select="(res) => { temp.referrer = res.id, temp.referrer_name = res.name }" />
        <SelectTeacher :visible.sync="selectTeacherVisible" @select="(res) => { temp.teacher = res.id, temp.teacher_name = res.name }" />
        <div slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="temp.id > 0 ? updateData() : createData() ">确认</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import studentApi from '@/api/student'
import UploadImage from '../components/UploadImage'
import SelectStudent from '../components/SelectStudent'
import SelectTeacher from '../components/SelectTeacher' // 导入 SelectTeacher 组件

export default {
  name: 'StudentIndex',
  components: { Pagination, UploadImage, SelectStudent, SelectTeacher },
  filters: {
  },
  data() {
    return {
      listLoading: false,
      search: {
        name: ''
      },
      pageInfo: {
        total: 100,
        current_page: 1,
        per_page: 20,
        data: []
      },
      gradeOptions: ['初级', '中级', '高级', '特级'],
      emptyTemp: null,
      temp: {
        id: 0,
        code: '',
        name: '',
        nickname: '',
        birthday: '',
        sex: '男',
        grade: '',
        img: '',
        address: '',
        parent_name: '',
        parent_relation: '',
        parent_phone: '',
        parent_wxid: '',
        referrer: 0,
        referrer_name: '',
        teacher: 0,
        teacher_name: ''
      },
      dialogVisible: false,
      dialogTitle: '',
      selectStudentVisible: false,
      selectTeacherVisible: false
    }
  },
  created() {
    this.emptyTemp = Object.assign({}, this.temp)
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      const params = { ...this.search, page: this.pageInfo.current_page, pageSize: this.pageInfo.per_page }
      studentApi.page(params).then(response => {
        response.data.data.forEach(item => {
          // 将生日变成年龄
          item.age = ''
          if (item.birthday) {
            const birthDate = new Date(item.birthday)
            const currentDate = new Date()
            item.age = currentDate.getFullYear() - birthDate.getFullYear()
          }
        })
        response.data.total = 100
        this.pageInfo = response.data
        this.listLoading = false
      }).catch(() => {})
    },
    handleFilter() {
      this.pageInfo.current_page = 1
      this.getList()
    },
    resetTemp() {
      this.temp = {
        code: '',
        name: ''
      }
    },
    showDialog(index) {
      if (typeof index === 'undefined') {
        this.dialogTitle = '添加学生'
        if (this.temp.id) {
          this.resetTemp()
        }
      } else {
        this.temp = JSON.parse(JSON.stringify(this.pageInfo.data[index]))
        this.dialogTitle = '添加学生'
      }
      this.dialogVisible = true
    },
    updateData() {
      studentApi.edit(this.temp).then(res => {
        this.getList()
        this.dialogVisible = false
        this.$message.success('更新成功')
      })
    },
    createData() {
      studentApi.add(this.temp).then(res => {
        this.getList()
        this.dialogVisible = false
        this.$message.success('创建成功')
      })
    },
    handleDelete(row) {
      this.$confirm('确认删除该学生【' + row.name + '】吗', '警告').then(() => {
        studentApi.delete(row.id).then(() => {
          this.getList()
          this.$message.success('删除成功')
        })
      })
    }
  }
}
</script>
